<html>

<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="../libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="../libraries/matter.js"></script>
  <script language="javascript" type="text/javascript" src="../libraries/helpers.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    #sprite-background {
      position: absolute;
      width: 600;
      height: 385;
      background: url('background.png') no-repeat;
      z-index: -1;
    }

    #sprite-foreground {
      position: absolute;
      width: 600;
      height: 385;
      background: url('foreground.png') no-repeat;
      z-index: 1;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <div id="sprite-background"></div>
  <!-- p5 canvas is generated on run time -->
  <div id="sprite-foreground"></div>
</body>

</html>
